<style>
    .showSec2_classfiy {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4%;
    }
</style>
<!--  / warpper  -->
<main class="warpper" id="showapp">

    <div class="showSec1">
        <div class="showSec1_con">
            <div class="showSec1_box" style="background: url(__CDN__{$data.image1}) center / 34% 100% no-repeat;">
                <h6>Y.SING</h6>
                <h6>BORN TO BEAUITY</h6>
            </div>
            <div class="showSec1_txt">
                {$data.content2}
            </div>
        </div>
    </div>

    <div class="showSec2">
        <!-- 容器列表 -->
        <ul class="showSec2_list">
            <!-- logo、简介 -->
            <li>
                <div class="showSec2_line"><span></span><span></span><span></span><span></span></div>
                <div class="showSec2_logo">
                    <img src="__CDN__/static/images/logo3.png" alt="">
                    <img src="__CDN__/static/images/logoBlack.png" alt="">
                </div>
                <div class="showSec2_txt2">
                    <p>Y.SING focuses on the product itself,</p>
                    <p>combining classic and modern</p>
                </div>
            </li>
            <!-- 分类、上下页切换按钮 -->
            <li>
                <div class="showSec2_line"><span></span><span></span><span></span><span></span></div>
                <div class="showSec2_classfiy">
<!--                    {foreach $year as $row}-->
<!--                    <span onclick="yearChange({$row.id})" {if $year_id == $row.id} class="on" {/if}>{$row.name}</span>-->
<!--                    {/foreach}-->
                    <span v-for="(item, key) in yearData" :class="{'on': item.id == year_id}" @click="getSeasonShowProductList(id, item.id)">{{item.name}}</span>
                    <!--                    <span class="on">23年上新</span>-->
                    <!--                    <span>22年上新</span>-->
                    <!--                    <span>21年上新</span>-->
                    <!--                    <span>20年上新</span>-->
                </div>
                <div class="showSec2_txt2">
                    <p>Create simplicity and elegance</p>
                    <p>Women's fashion with great personality</p>
                </div>
                <div class="showSec2_btn">
                    <img class="showSec2_prev" @click="getSeasonShowProductPage('prev')" src="__CDN__/static/images/prev.png" alt="">
                    <img class="showSec2_next" @click="getSeasonShowProductPage('next')" src="__CDN__/static/images/next.png" alt="">
                </div>
            </li>
            <!-- 下面为商品（图片、文字）容器 -->
<!--            {foreach $product as $row}-->
<!--            <li>-->
<!--                <div class="showSec2_line"><span></span><span></span><span></span><span></span></div>-->
<!--                <div class="showSec2_img"-->
<!--                     style="background: url(__CDN__{$row.image1}) center top/cover no-repeat;"></div>-->
<!--                <div class="showSec2_txt">-->
<!--                    <p>{$row.name}</p>-->
<!--                    <p>see more>></p>-->
<!--                </div>-->
<!--            </li>-->
<!--            {/foreach}-->
            <li v-for="(item, key) in productData" @click="productFadeIn(key)">
                <div class="showSec2_line"><span></span><span></span><span></span><span></span></div>
<!--                <div class="showSec2_img" style="background: url(__CDN__{{item.image1}}) center top/cover no-repeat;"></div>-->
                <div class="showSec2_img" :style="'background: url('+ item.image1 +') center top/cover no-repeat;'"></div>
                <div class="showSec2_txt">
                    <p>{{item.name}}</p>
                    <p>see more>></p>
                </div>
            </li>
        </ul>
        <!-- 弹出框 -->
        <div class="showSec2_con">
            <!-- 商品切换轮播 -->
            <div class="swiper-container showSec2Swiper">
                <div class="swiper-wrapper">
<!--                    {foreach $product as $row}-->
<!--                    <div class="swiper-slide">-->
<!--                        <div class="showSec2Swiper_img">-->
<!--                            <img src="__CDN__{$row.image2}" alt="">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    {/foreach}-->
                    <div v-for="(item, key) in productData" class="swiper-slide">
                        <div class="showSec2Swiper_img">
<!--                            <img src="__CDN__{{item.image2}}" alt="">-->
                            <img :src="item.image2" alt="">
                        </div>
                    </div>
                </div>
                <div class="showSec2Swiper_btn showSec2Swiper_prev">
                    <img src="__CDN__/static/images/prev2.png" alt="">
                </div>
                <div class="showSec2Swiper_btn showSec2Swiper_next">
                    <img src="__CDN__/static/images/next2.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="showSec3">
        <div class="showSec3_con">
            <div class="showSec3_title">{$data.string3}</div>
            <!-- 商品切换轮播 -->
            <div class="swiper-container showSec3Swiper">
                <div class="swiper-wrapper">
                    {foreach $data.images4 as $images4}
                    <div class="swiper-slide">
                        <div class="showSec3Swiper_img">
                            <img src="{$images4}" width="100%">
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div class="showSec3Swiper_btn showSec3Swiper_prev">
                    <img src="__CDN__/static/images/prev2.png" alt="">
                </div>
                <div class="showSec3Swiper_btn showSec3Swiper_next">
                    <img src="__CDN__/static/images/next2.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="showSec4" style="background: url(__CDN__{$data.image5}) center top/cover no-repeat;">
        <div class="showSec4_txt">
            <p>{$data.string5}</p>
        </div>
    </div>

</main>
<!--  / warpper  -->

<script>
    new Vue({
        el: "#showapp",
        data() {
            return {
                id: "{$id}",
                year_id: "{$year_id}",
                yearData: [],
                productData: [],
            }
        },
        created() {
            let that = this;
            this.getSeasonShowYearList();
            this.getSeasonShowProductList(that.id,that.year_id);
        },
        methods: {
            getSeasonShowYearList: function () {
                //加载层-风格3
                layer.load(2);
                let that = this;
                let dataAc = {};
                $.ajax({
                    url: '/api/index/getSeasonShowYearList',
                    loading: false,
                    type: 'GET',
                    data: dataAc,
                    success: function (res) {
                        layer.closeAll('loading');
                        that.yearData = res.data;
                        $(".showSec2_classfiy").children('span').eq(0).addClass('on');
                        return false;
                    },
                    error: function (res) {
                        layer.closeAll('loading');
                        layer.msg(res.responseJSON.msg, {
                            icon: 0,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        });
                    }
                })
            },
            getSeasonShowProductList: function (id,year) {
                //加载层-风格3
                layer.load(2);
                let that = this;
                if(year){
                    that.year_id = year;
                }
                let dataAc = {
                    id,
                    year,
                };
                $.ajax({
                    url: '/api/index/getSeasonShowProductList',
                    loading: false,
                    type: 'GET',
                    data: dataAc,
                    success: function (res) {
                        layer.closeAll('loading');
                        that.productData = res.data;
                        return false;
                    },
                    error: function (res) {
                        layer.closeAll('loading');
                        layer.msg(res.responseJSON.msg, {
                            icon: 0,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        });
                    }
                })
            },
            getSeasonShowProductPage: function (mold) {
                //加载层-风格3
                // layer.load(2);
                let that = this;
                let year_len = that.yearData.length;
                let year_index = $('.showSec2_classfiy span.on').index();
                switch (mold){
                    case 'next':
                        if(year_index + 1 >= year_len){
                            year_index = 0;
                        }else{
                            year_index += 1;
                        }
                        break;
                    case 'prev':
                        if(year_index - 1 < 0){
                            year_index = year_len - 1;
                        }else{
                            year_index -= 1;
                        }
                        break;
                }
                that.getSeasonShowProductList(that.id,that.yearData[year_index].id);
            },
            productFadeIn: function (key) {
                //加载层-风格3
                // layer.load(2);
                let that = this;
                $('.showSec2_con').fadeIn();
                var showSec2Swiper = new Swiper('.showSec2Swiper', {
                    loop: true,
                    speed: 1200,
                    observer: true,
                    observeParents: true,
                    prevButton: '.showSec2Swiper_prev',
                    nextButton: '.showSec2Swiper_next',
                })
                showSec2Swiper.slideTo(key + 1)
            },
        },
    })
</script>

<script>
    function yearChange(param) {
        window.location.href = "{:url('index/index/show')}?id="+{$id}+"&year="+param;
    }


    $(function () {

        // 分类切换
        // $('body').on('click', '.showSec2_classfiy span', function () {
        //     $(this).addClass('on').siblings('span').removeClass('on');
        // })
        // var index = $('.showSec2_classfiy span.on').index();
        // var length = $('.showSec2_classfiy span.on').index();
        // // 上一分类
        // $('body').on('click', '.showSec2_prev', function () {
        //     if (index > 0) {
        //         $('.showSec2_classfiy span').eq(index - 1).addClass('on').siblings('span').removeClass('on');
        //     } else {
        //         $('.showSec2_classfiy span').eq($('.showSec2_classfiy span').length - 1).addClass('on').siblings('span').removeClass('on');
        //     }
        // })
        // // 下一分类
        // $('body').on('click', '.showSec2_next', function () {
        //     var index = $('.showSec2_classfiy span.on').index();
        //     if (index < $('.showSec2_classfiy span').length - 1) {
        //         $('.showSec2_classfiy span').eq(index + 1).addClass('on').siblings('span').removeClass('on');
        //     } else {
        //         $('.showSec2_classfiy span').eq(0).addClass('on').siblings('span').removeClass('on');
        //     }
        // })
        // 弹出轮播
        // $('body').on('click', '.showSec2_list li:nth-child(n+3)', function () {
        //     $('.showSec2_con').fadeIn();
        //     var showSec2Swiper = new Swiper('.showSec2Swiper', {
        //         loop: true,
        //         speed: 1200,
        //         observer: true,
        //         observeParents: true,
        //         prevButton: '.showSec2Swiper_prev',
        //         nextButton: '.showSec2Swiper_next',
        //     })
        // })
        // 关闭弹出
        $('body').on('click', '.showSec2Swiper_img', function (event) {
            event.stopPropagation();
            $('.showSec2_con').fadeOut();
        })
        $('body').on('click', '.showSec2Swiper_img img', function (event) {
            event.stopPropagation();
            return false;
        })


        // 左中右轮播
        var showSec3Swiper = new Swiper('.showSec3Swiper', {
            loop: true,
            speed: 1000,
            observer: true,
            observeParents: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            slidesPerView: 2.4,
            slidesPerGroup: 1,
            spaceBetween: 120,
            centeredSlides: true,
            prevButton: '.showSec3Swiper_prev',
            nextButton: '.showSec3Swiper_next',
            breakpoints: {
                1440: {
                    spaceBetween: 80,
                },
                768: {
                    spaceBetween: 40,
                },
            }
        })

    })

    $(window).load(function () {
        if ($(window).width() <= 768) {
            $('.showSec1,.showSec2').addClass('on');
        }
    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()


    })

</script>